import { homeRapids } from '@/utils';
import '../index.less';
import { useState } from 'react';
import { FadeIn } from '@/components/Animation';

export default function Rapid({ isPc }: any) {
  const [curIndex, setCurIndex] = useState(0);
  const menuChange = (i: any) => {
    console.log('i: ', i);
    setCurIndex(i);
  };

  const BigImg = () => {
    console.log('curIndex: ', curIndex);
    return (
      <div className="imgwrap center">
        <FadeIn delay={isPc ? 0.9 : 0.4}>
          {/* <div>{curIndex}</div> */}
          {homeRapids.map((item: any, i: number) => (
            <>
              {curIndex === i && (
                <img className={curIndex === i ? 'imgShow' : ''} src={item.img} alt="" key={i} />
              )}
            </>
          ))}
        </FadeIn>
      </div>
    );
  };

  return (
    <div className="homeRapid mainWidth">
      <div className="htop flex">
        <FadeIn>
          <div className="rtitle font-bold text-[50px]">Rapid analytics, real-time visibility</div>
        </FadeIn>
        <FadeIn delay={0.3}>
          <div className="stit font-bold text-[32px]">
            Utility-scale visual analytics, powered by robotics and software.
          </div>
        </FadeIn>
      </div>

      <div className="pagecon">
        {!isPc && <BigImg />}
        <div className="menus pl-[50px]">
          <FadeIn delay={0.6}>
            {isPc && (
              <div className="ctit font-bold text-[18px]">
                Do more with automation and robotics than just aerial thermography.
              </div>
            )}
            <div className="cases font-bold text-[18px]">Example use cases:</div>
            <div className="lists flex flex-col gap-[15px]">
              {homeRapids.map((item: any, i: number) => (
                <div
                  className={`titem font-bold ${curIndex === i && 'titemAct'}`}
                  key={i}
                  onMouseOver={() => menuChange(i)}
                >
                  {item.title}
                </div>
              ))}
            </div>
          </FadeIn>
        </div>
        {isPc && <BigImg />}
      </div>
    </div>
  );
}
